<template>
    <a-config-provider :locale="this.$store.getters.locale">
      <a-layout v-if="!isNotFoundPage" class="max-height top-layout">
        <!--顶部栏-->
        <a-layout-header class="fortune-background-color fortune-underline fortune-layout-header">
          <a-row type="flex" align="top" justify="space-between">
            <a-col @click="$router.push('/')" class="logo">{{ $t('messages.fortune') }} &copy;</a-col>
            <a-col>
              <global-setting class="a-card-beautiful"/>
            </a-col>
          </a-row>
        </a-layout-header>
        <!--主体-->
        <a-layout>
          <!--侧边栏-->
          <a-layout-sider theme="light" v-model:collapsed="collapsed" collapsible :width="siderWidth">
            <side-menu/>
          </a-layout-sider>
          <!--功能区-->
          <a-layout-content class="menu-content">
            <router-view/>
          </a-layout-content>
        </a-layout>
        <!--解决跳转异常页面时导航菜单栏仍然存在的问题-->
      </a-layout>
      <router-view v-else/>
    </a-config-provider>
</template>

<script>
import {ref} from "vue";
import GlobalSetting from "./components/setting/GlobalSetting";
import SideMenu from "./components/menu/SideMenu";

export default {
  name: 'App',
  methods: {
    switchLocale(antd, locale) {
      console.log(antd, locale);
      this.$store.commit(antd);
      this.$i18n.locale = locale
    }
  },
  data() {
    return {
    }
  },
  components: {
    GlobalSetting,
    SideMenu
  },
  computed: {
    isNotFoundPage () {
      return this.$route.name === '*';
    },
    siderWidth () {
      return this.$store.getters.siderWidth
    }
  },
  setup () {
    return {
      collapsed: ref(false)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
html,body,#app {
  height: 100%;
  margin: 0;
  padding: 0;
}
.fortune-underline {
  border-bottom: 1px solid #e7e4e4;
}
</style>
